<!-- 车型管理 -->
<template>
  <div class="dashboard-container car-models customer-list-box">
    <div class="app-container">
      <!-- 搜索 -->
      <el-card
        shadow="never"
        class="search-card-box"
        style="margin-bottom: 20px;"
      >
        <el-form
          ref="carModelSearchFormData"
          :model="carModelSearchFormData"
          label-width="90px"
        >
          <el-row :gutter="60">
            <el-col :span="8">
              <el-form-item
                label="车型编号:"
                style="margin-bottom: 0px"
              >
                <el-input
                  v-model="carModelSearchFormData.id"
                  placeholder="请输入车型编号"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="应载重量:"
                style="margin-bottom: 0px"
                label-width="80px"
              >
                <el-select
                  v-model="carModelSearchFormData.allowableLoad"
                  placeholder="请选择应载重量"
                >
                  <el-option
                    v-for="item in allowableLoadList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="应载体积:"
                style="margin-bottom: 20px"
                label-width="80px"
              >
                <el-select
                  v-model="carModelSearchFormData.allowableVolume"
                  placeholder="请选择应载体积"
                >
                  <el-option
                    v-for="item in allowableVolumeList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="车型类型:"
                style="margin-bottom: 0px"
              >
                <el-input
                  v-model="carModelSearchFormData.name"
                  placeholder="请输入车型类型"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-button
                type="warning"
                @click="searchFn"
              >搜索</el-button>
              <el-button
                plain
                class="reset-btn"
                @click="resetForm('carModelSearchFormData')"
              >重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>

      <!-- 列表 -->
      <el-card
        v-loading="listLoading"
        class="box-card"
        shadow="never"
        element-loading-text="加载中"
      >
        <el-button
          type="warning"
          style="margin-bottom:20px"
          @click="handleAddCarModel()"
        >新增车型</el-button>
        <template>
          <el-table
            :data="carModelList"
            stripe
            style="width: 100%"
          >
            <el-table-column
              type="index"
              width="60"
              label="序号"
            >
            </el-table-column>
            <el-table-column
              prop="id"
              label="车型编号"
              width="260"
            >
            </el-table-column>
            <el-table-column
              prop="name"
              label="车辆类型"
              width="185"
            >
            </el-table-column>
            <el-table-column
              prop="num"
              label="车辆数量"
              width="142"
            >
            </el-table-column>
            <el-table-column
              prop="allowableLoad"
              label="应载重量（吨）"
              width="214"
            >
            </el-table-column>
            <el-table-column
              prop="allowableVolume"
              label="应载体积（立方米）"
              width="214"
            >
            </el-table-column>
            <el-table-column
              prop="measureLong"
              label="长（米）"
              width="142"
            >
            </el-table-column>
            <el-table-column
              prop="measureWidth"
              label="宽（米）"
              width="142"
            >
            </el-table-column>
            <el-table-column
              prop="measureHigh"
              label="高（米）"
              width="142"
            >
            </el-table-column>
            <el-table-column
              label="操作"
              width="110"
              align="center"
            >
              <template #default="scope">
                <el-link
                  type="primary"
                  :underline="false"
                  @click="handleAddCarModel(scope.row.id)"
                >编辑</el-link>
                <el-divider direction="vertical"></el-divider>
                <el-link
                  type="danger"
                  :underline="false"
                  @click="handleDelCarModel(scope.row.id)"
                >删除</el-link>
              </template>
            </el-table-column>
            <!-- 搜索不到内容时显示 -->
            <el-card
              v-show="
                (!carModelList || carModelList.length <= 0) && !listLoading && searchkey
              "
              slot="empty"
              shadow="never"
            >
              <empty style="text-align: center"></empty>
            </el-card>
          </el-table>
        </template>
        <!-- 分页 -->
        <div
          v-show="carModelList && carModelList.length > 0"
          class="pagination"
        >
          <div class="pages">
            <el-pagination
              :current-page="Number(carModelSearchFormData.page)"
              :total="Number(total)"
              :page-size="Number(carModelSearchFormData.pageSize)"
              :page-sizes="[10, 20, 30, 50]"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </el-card>

      <!-- 新增车型 -->
      <carModelsDialog
        ref="addCarModel"
        :title-info="titleInfo"
        :form-base="formData"
        @newDataes="getListDia"
      ></carModelsDialog>
    </div>
  </div>
</template>
<script>
import { list, detail, del } from '@/api/transit'
import carModelsDialog from './components/car-models-add.vue'
export default {
  components: {
    carModelsDialog
  },
  data() {
    return {
      // 搜索表单数据
      carModelSearchFormData: {
        page: 1,
        pageSize: 10,
        name: '',
        id: null,
        allowableLoad: '',
        allowableVolume: ''
      },
      // 车型载重对应关系:
      allowableLoadList: [
        {
          value: 'RANGE_LEVEL_1',
          name: '<1.8（吨）'
        },
        {
          value: 'RANGE_LEVEL_2',
          name: '1.8-6（吨）'
        },
        {
          value: 'RANGE_LEVEL_3',
          name: '6-14（吨）'
        },
        {
          value: 'RANGE_LEVEL_4',
          name: '14-30（吨）'
        },
        {
          value: 'RANGE_LEVEL_5',
          name: '30-50（吨）'
        },
        {
          value: 'RANGE_LEVEL_6',
          name: '50-100（吨）'
        },
        {
          value: 'RANGE_LEVEL_7',
          name: '100>（吨）'
        }
      ],
      // 车型体积对应关系
      allowableVolumeList: [{
        value: 'RANGE_LEVEL_1',
        name: '<3（m³）'
      },
      {
        value: 'RANGE_LEVEL_2',
        name: '3-5（m³）'
      },
      {
        value: 'RANGE_LEVEL_3',
        name: '5-10（m³）'
      },
      {
        value: 'RANGE_LEVEL_4',
        name: '10-15（m³）'
      },
      {
        value: 'RANGE_LEVEL_5',
        name: '15-30（m³）'
      },
      {
        value: 'RANGE_LEVEL_6',
        name: '30-50（m³）'
      },
      {
        value: 'RANGE_LEVEL_7',
        name: '50-80（m³）'
      },
      {
        value: 'RANGE_LEVEL_8',
        name: '80-150（m³）'
      },
      {
        value: 'RANGE_LEVEL_9',
        name: '150>（m³）'
      }],
      // 列表数据集合
      carModelList: [],
      listLoading: true,
      // 总数量
      total: 0,
      searchkey: false,
      // 新增页面数据字段
      formData: {
        allowableLoad: '',
        allowableVolume: '',
        name: '',
        measureLong: '0.0',
        measureHigh: '0.0',
        measureWidth: '0.0'
      },
      // 弹窗标题
      titleInfo: {
        text: ''
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 获取列表数据
    async getList() {
      this.listLoading = true
      const res = await list(this.carModelSearchFormData)
      // console.log(res)
      this.carModelList = res.data.items
      this.total = res.data.counts
      this.listLoading = false
    },
    clearField() {
      // 如果其他搜索项没有值则不传给后端
      if (this.carModelSearchFormData.id === '') {
        this.$delete(this.carModelSearchFormData, 'id')
      }
      if (this.carModelSearchFormData.allowableLoad === '') {
        this.$delete(this.carModelSearchFormData, 'allowableLoad')
      }
      if (this.carModelSearchFormData.name === '') {
        this.$delete(this.carModelSearchFormData, 'name')
      }
      if (this.carModelSearchFormData.allowableVolume === '') {
        this.$delete(this.carModelSearchFormData, 'allowableVolume')
      }
    },
    setField() {
      // 对搜索项属性设置响应式，便于重置方法生效
      this.$set(this.carModelSearchFormData, 'id')
      this.$set(this.carModelSearchFormData, 'allowableLoad')
      this.$set(this.carModelSearchFormData, 'name')
      this.$set(this.carModelSearchFormData, 'allowableVolume')
    },
    // 搜索
    searchFn() {
      this.clearField()
      this.carModelSearchFormData.page = 1
      this.getList()
      this.searchkey = true
    },
    // 重置搜索项
    resetForm(carModelSearchFormData) {
      this.setField()
      this.searchkey = false
      this.$refs[carModelSearchFormData].resetFields()
      this.getList()
    },
    handleDelFreight() {},
    // 每页显示信息条数
    handleSizeChange(val) {
      this.carModelSearchFormData.pageSize = val
      if (this.carModelSearchFormData.page === 1) {
        this.getList(this.carModelSearchFormData)
      }
    },
    // 进入某一页
    handleCurrentChange(val) {
      this.carModelSearchFormData.page = val
      this.getList()
    },
    handleAddCarModel(id) {
      if (id) {
        this.hanldeEditForm(id)
        this.titleInfo.text = '编辑车型'
      } else {
        this.formData.allowableLoad = ''
        this.formData.allowableVolume = ''
        this.formData.name = ''
        this.formData.measureLong = '0.0'
        this.formData.measureHigh = '0.0'
        this.formData.measureWidth = '0.0'
        this.titleInfo.text = '新增车型'
        this.$refs.addCarModel.dialogFormV()
      }
    },
    // 点击的列表数据的修改按钮，根据id获取对应数据
    hanldeEditForm(id) {
      detail(id).then((res) => {
        const { data } = res
        this.formData.name = data.name
        this.formData.id = data.id
        this.formData.allowableLoad = data.allowableLoad
        this.formData.allowableVolume = data.allowableVolume
        this.formData.measureLong = data.measureLong
        this.formData.measureWidth = data.measureWidth
        this.formData.measureHigh = data.measureHigh
        this.$refs.addCarModel.dialogFormV()
      })
    },
    // 子组件新增或编辑成功，通知父组件更新列表
    getListDia() {
      this.getList()
    },
    // 删除数据
    handleDelCarModel(id) {
      this.$confirm('确定要删除车型吗?', '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.change(id)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    async change(id) {
      await del(id).then((res) => {
        // 异常不处理，信息不外抛。。。。
        if (String(res.code) === '200') {
          this.$message.success('删除成功')
          this.getList()
        } else {
          this.$message.error(res.msg || '删除失败')
        }
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.add-btn{
  margin-bottom: 20px;
}
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 40px;
  padding-bottom: 40px;
  display: flex;
  justify-content: center;
}

.el-select {
  width: 100%;
}

.car-models ::v-deep .el-table td,
.el-table th {
  padding: 12px 0;
  min-width: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
  overflow: hidden;
}
.car-models {
  ::v-deep .el-dialog__title {
    width: 73px;
    height: 25px;
    font-size: 18px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: #20232a;
    line-height: 25px;
    letter-spacing: 0px;
  }
  ::v-deep .el-dialog__body {
    text-align: center;
    padding: 40px 60px 0 30px;
  }
  .warn-img {
    width: 40px;
  }
  p {
    height: 24px;
    font-size: 16px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    color: #818693;
    line-height: 24px;
  }
}
</style>
